<template>
  <div>
    <v-dialog title="年审查看" :show.sync="dialogVisible" width="1600px">
      <div class="card-box">
        <div class="data-title">物业信息</div>
        <el-form ref="editForm" class="form-wrap" :model="form" size="small">
          <el-form-item label="授权编号" prop="authorizationNumber">
            <el-input v-model="form.authorizationNumber" disabled>
              <el-button slot="append" icon="el-icon-search" @click="showProperty(form.useCardId)"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="物业名称" prop="propertyName">
            <el-input disabled v-model="form.propertyName"></el-input>
          </el-form-item>
          <el-form-item label="物业地址" prop="propertyAddress">
            <el-input disabled v-model="form.propertyAddress"></el-input>
          </el-form-item>
          <el-form-item label="使用单位" prop="unitName">
            <el-input disabled v-model="form.unitName"></el-input>
          </el-form-item>
          <el-form-item label="授权日期" prop="authorizationTm">
            <el-input disabled v-model="form.authorizationTm"></el-input>
          </el-form-item>
          <el-form-item label="授权期限" prop="authorizationPeriod">
            <el-input disabled v-model="authorizationPeriod"></el-input>
          </el-form-item>
          <el-form-item label="授权类型" prop>
            <br />
            <span>{{form.authorizationUse|dict('authorization-type')}}</span>
          </el-form-item>
          <el-form-item label="授权用途" prop>
            <br />
            <span>{{form.authorizationUse|dict('authorization-type')}}</span>
          </el-form-item>
          <el-form-item label="联系人" prop="userName">
            <el-input disabled v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="tell">
            <el-input disabled v-model="form.tell"></el-input>
          </el-form-item>
          <el-form-item label="超期天数" prop>
            <el-input :disabled="!isEdit"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="card-box">
        <div class="data-title">年审信息</div>
        <div v-if="isEdit" style="text-align: right;margin: 10px">
          <el-button type="primary" size="small" @click="add">新增</el-button>
        </div>
        <el-table :data="tableData" align="center">
          <el-table-column type="index" align="center" width="80" label="序号"></el-table-column>
          <el-table-column align="center" label="年审日期">
            <template slot-scope="scope">
              <el-date-picker v-model="scope.row.annualAuditDate" type="date" placeholder="选择日期"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" width="500" label="年审要求" prop="auditContent"></el-table-column>
          <el-table-column label="附件(支持扩展名：doc、docx、pdf、jpg、png)" width="500" prop>
            <template slot-scope="scope">
              <el-upload
                v-if="isEdit"
                :file-list="fileList[scope.$index]"
                :on-success="onSuccess"
                :limit="1"
                :http-request="(file)=>{return upLoad(file,scope.$index)}"
                class="avatar-uploader"
                action="/admin/sys-file/upLodeFileAdd"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div v-for="(item, index) in fileList[scope.$index]" :key="index"></div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remarks"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="card-box" style="text-align: right" slot="foot">
        <el-button type="primary" size="small" @click="dialogVisible=false">关闭</el-button>
      </div>
      <edit-property ref="editProperty" @ok="ok"></edit-property>
    </v-dialog>
  </div>
</template>

<script>
import uploadMedia from '@/components/upload-media'
import editProperty from './edit-property'
import { fetchList } from '../../annual-audit-setting/api/annualaudittemplate'
import { addObj } from '../api/annualauditinfo'
export default {
  components: { uploadMedia, editProperty },

  data () {
    return {
      dialogVisible: false,

      authorizationPeriod: '',
      tableData: [],
      form: {},
      template: [],
      fileList: [[]]
    }
  },
  methods: {
    show (item, isEdit) {
      this.dialogVisible = true
      this.isEdit = isEdit
      this.form.useCardId = item.useCardId
    },
    add () {
      for (let i = 0; i < this.template.length; i++) {
        let data = {
          auditTemplateId: this.template[i].auditTemplateId,
          auditContent: this.template[i].auditContent,
          busId: '',
          annualAuditDate: this.form.authorizationTm,
          remarks: ''
        }
        this.tableData.push(data)
      }
    },
    del (item) {
      this.tableData.splice(item, 1)
    },
    submit () {
      console.log({ annualAuditInfo: this.form, annualAuditRecords: this.tableData })
      addObj({ annualAuditInfo: this.form, annualAuditRecords: this.tableData }).then(res => {
        if (res) {
          this.$message('保存成功')
          this.dialogVisible = false
        }
      })
    },
    onSuccess (rep, file, index) {
      //文件上传成功，开始保存表单

      // if (rep.data) {
      //     this.$message('上传成功')
      // } else {
      //     this.err('提交失败')
      // }
    },

    upLoad (file, index) {
      const formData = new FormData()
      formData.append('file', file.file)
      formData.append('module', 'annual')
      this.http.post(this.fileUploadUrl, formData).then(res => {
        let data = res.data.data
        this.tableData[index].busId = data
        console.log(this.tableData)
        this.$message('上传成功!')
      })
    },
    showProperty (id) {
      this.$refs.editProperty.show(id)

    },
    ok (item) {
      this.form = item
      console.log(item)
      this.form.authorizationTm = item.authorizationTime
      this.form.authorizationStartTm = item.startTime
      this.form.authorizationEndTm = item.endTime
      this.authorizationPeriod = this.form.authorizationStartTm + '至' + this.form.authorizationEndTm
      fetchList().then(res => {
        this.template = res.data.data.records
        for (let i = 0; i < this.template.length; i++) {
          let data = {
            auditTemplateId: this.template[i].auditTemplateId,
            auditContent: this.template[i].auditContent,
            busId: '',
            annualAuditDate: this.form.authorizationTm,
            remarks: ''
          }
          this.tableData.push(data)
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@include data-title();
@include info-list(3);
@include formWrap(4);
</style>
